<template>
	<view class="content">
		<!-- #ifdef MP-TOUTIAO -->
		<view class="send-video" v-show="showVideo">
			<button class="custom-share-button" open-type="share" data-channel="video" ><img src="../../static/send-video.jpeg">拍视频</button>
		</view>
		<!-- #endif -->
		<Search :keywords="keywords"  @searchEvent="searchAction"/>
		<swiper v-if="banner.length > 0" indicator-dots="true" autoplay="true" circular="true" indicator-active-color="rgba(255, 255, 255, .7)" :style="{height: `${windowWidth/2}px`}">
			<swiper-item class="banner" v-for="item in banner" :key="item.topic_id">
				<navigator :url="`/pages/detail/index?id=${item.topic_id}&title=${item.title}`">
					<image :src="item.banner_img" mode="scaleToFill" :style="{width: `${windowWidth}px`, height: `${windowWidth/2}px`}" />
				</navigator>
			</swiper-item>
		</swiper>
		<view class="main-cate" v-if="cateList.length > 0">
			<view v-for="item in cateList" :key="item.id" @click="navigateToCate(item.id)">
				<image mode="widthFix" :src="item.img"></image>
				<text>{{item.name}}</text>
			</view>
		</view>
		<!-- #ifdef MP-TOUTIAO -->
		<view class="program-tips">--本小程序仅供娱乐--</view>
		<!-- #endif -->
		<view class="scroll-list" v-if="hotList.length > 0">
			<view class="scroll-head">
				<image src="../../static/ic-label.png" mode="widthFix"></image>
				<text>热门测试</text>
			</view>
			<scroll-view scroll-x="true">
				<view class="scroll-wrapper">
					<navigator :url="`/pages/detail/index?id=${item.topic_id}&title=${item.title}`" class="scroll-item" v-for="item in hotList" :key="item.topic_id">
						<image :src="item.banner_img" :style="{width: `${windowWidth * .28}px`, height: `${windowWidth * .28}px`}" />
						<view class="scroll-item-name">
							<text>{{item.title}}</text>
						</view>
						<!-- <view class="scroll-item-price">免费</view> -->
					</navigator>
				</view>
			</scroll-view>
		</view>
		
		<!-- #ifdef MP-QQ -->
		<ad unit-id="25fedc6fabb07c88f9ac2a5d6452f6dc" type="feeds"></ad>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<ad unit-id="adunit-8c3ef87274f0a04f" ad-type="video" ad-theme="white"></ad>
		<!-- #endif -->
		<!-- #ifdef MP-TOUTIAO -->
		<view>
		  <ad
		    unit-id="2ge99l4oa01786fdjg"
		    bindload="adloadhandler"
		    binderror="aderrorhandler"
		    bindclose="adclosehandler"
		  ></ad>
		</view>
		<!-- #endif -->
		
		<view class="scroll-list" v-if="newList.length > 0">
			<view class="scroll-head">
				<image src="../../static/ic-label.png" mode="widthFix"></image>
				<text>上新测试</text>
			</view>
			<scroll-view scroll-x="true">
				<view class="scroll-wrapper">
					<navigator :url="`/pages/detail/index?id=${item.topic_id}&title=${item.title}`" class="scroll-item" v-for="item in newList" :key="item.topic_id">
						<image :src="item.banner_img" :style="{width: `${windowWidth * .28}px`, height: `${windowWidth * .28}px`}" />
						<view class="scroll-item-name">
							<text>{{item.title}}</text>
						</view>
						<!-- <view class="scroll-item-price">免费</view> -->
					</navigator>
				</view>
			</scroll-view>
		</view>
		
		
		
		<view class="list">
			<view class="scroll-head">
				<image src="../../static/ic-good.png" mode="widthFix"></image>
				<text>猜你喜欢</text>
			</view>
			<view class="list-ul">
				<Item v-for="item in allList" :key="item.topic_id" :item="item" />
			</view>
			<view class="btn-loadmore" @click="loadMoreAction" v-if="!loadOver">查看更多</view>
			<view class="loading-tips" v-else>没有更多数据</view>
		</view>
	</view>
</template>

<script>
	import config from '../../src/config/api.config.js';
	import utils from '../../src/utils/utils.js';
	import userCheck from '../../src/utils/user.js';
	import request from '../../src/utils/request.js';
	import Search from './search.vue';
	import Item from './item.vue';
	
	export default {
		data() {
			return {
				windowWidth: 0, // 窗口大小
				page: 1, // 页码
				parentOpenid:'',//进入页面获取是否链接带有其他人的openid
				openid:'',
				isLoading: false, // 是否加载中
				loadOver: false, // 是否加载完成
				banner: [], // 轮播图
				hotList: [], // 热门测试
				newList: [], // 上新测试
				allList: [], // 全部
				keywords: '',
				showVideo:false,//是否显示拍抖音功能
				isDouyin:true,//是否为抖音端
				cateList: [], // 分类
			}
		},
		onLoad(options){
			const that = this;
			this.parentOpenid = options.parentOpenid != undefined ?options.parentOpenid:'';
			console.log('父级id：'+this.parentOpenid)
			/**
			 * 统一处理页面获取用户openid操作
			 * @param {Object} openid
			 */
			userCheck.checkSession(function(openid){
				console.log('回调的openid:'+openid)
				that.openid = openid
				console.log('页面上获取的openid：'+that.openid)
			},that.parentOpenid)
			
			// #ifdef MP-TOUTIAO
			const info = tt.getSystemInfoSync();
			if (info.appName.toUpperCase() !== 'DOUYIN') {
				this.isDouyin = false;
				this.showVideo = false;
			}
			// #endif
			
		},
		onReady() {
			// 加载数据
			this.getData();
			this.getCategory();
			// #ifdef MP-QQ
				qq.showShareMenu({
					showShareItems: ['qq', 'qzone', 'wechatFriends', 'wechatMoment']
				});
				qq.setEnableDebug({
					enableDebug: false
				});
			// #endif 
			
			// 获取窗口大小适配图片
			uni.getSystemInfo({
				success: (r) => {
					this.windowWidth = r.windowWidth;
				}
			});
		},
		methods: {
			async getData() {
				this.isLoading = true;
				const r = await request({
					url: `${config.API}api/topic/list`,
					data: {
						page: this.page
					}
				});
				this.isLoading = false;
				if(r.error_code === 0) {
					this.banner = r.data.banner;
					this.hotList = r.data.hostList;
					this.newList = r.data.newList;
					this.allList = [...this.allList, ...r.data.topicList.data];
					if(r.data.topicList.current_page >= r.data.topicList.last_page) {
						this.loadOver = true;
					}
					if(this.isDouyin){
						this.showVideo = r.data.show_video;
					}
					
				}
			},
			searchAction(keywords) {
				this.keywords = keywords;
				uni.navigateTo({
					url: `/pages/search/index?keywords=${this.keywords}`
				});
			},
			/**
			 * 点击查看更多加载分页数据
			 */
			loadMoreAction() {
				if(this.loadOver || this.isLoading) return;
				this.page ++;
				this.getData();
			},
			/**
			 * 获取分类
			 */
			async getCategory() {
				const r = await request({
					url: `${config.API}api/topic/cate`
				});
				if (r.error_code === 0) {
					this.cateList = r.data;
				}
			},
			/**
			 * 跳转到相关分类
			 * @param {number} id 分类id
			 */
			navigateToCate(id) {
				uni.reLaunch({
					url: `/pages/cate/index?id=${id}`
				});
			}
		},
		components: {
			Item,
			Search
		},
		onShareAppMessage(r) {
			let _path = '/pages/index/index?parentOpenid='+this.openid;
			return {
				title: "心理测试、趣味测试",
				path: _path, //带上当前用户的openid，分销绑定关系
			}
		}
	}
</script>

<style lang="scss" scoped>
	$black: #000;
	$white: #fff;
	$color9: #999;
	swiper {
		height: auto;
	}
	.grid {
		margin: 0 30rpx 30rpx 30rpx;
		.grid-dt {
			padding: 20rpx 0 24rpx 0;
			text {
				font-size: 40rpx;
				color: $black;
			}
		}
		.grid-dd {
			display: flex;
			flex-wrap: wrap;
			padding: 25rpx 0;
			background-color: $white;
			border-radius: 20rpx;
			navigator {
				width: 25%;
				padding: 25rpx 0;
				text-align: center;
				image {
					width: 90rpx;
					height: 90rpx;
					display: block;
					margin: 0 auto;
				}
				text {
					font-size: 24rpx;
				}
			}
		}
	}
	.list {
		.scroll-head {
			border-bottom: 1px solid #f1f1f1;
		}
	}
	.loading-tips {
		font-size: 28rpx;
		color: $color9;
		padding: 20rpx 0;
		text-align: center;
		margin-bottom: 20rpx;
	}
	.cate{
		height: 320rpx;
		.cate_view {
			width: 25%;
			display: block;
			float: left;
			margin: 0 auto 20rpx auto;
			.menu3icon {
				display:block;
				margin: 0 auto;
				width: 86rpx;
				height: 86rpx;
			}
			text {
				display: block;
				margin: 0 auto;
				font-size: 26rpx;
				text-align: center;
			}
		}
	}
	.announce-text{
		width: 90%;
		margin: 0 auto;
		display: inline-block;
		font-size: 24rpx;
		color:gray;
		text-align: center;
		margin-bottom: 20rpx;
	}
	.index-ad{
		margin-bottom: 20rpx;
	}
	.custom-share-button{
		
		img{
			width: 32rpx;
			height: 32rpx;
			vertical-align: middle;
			margin-top: -2px;
			margin-right: 2px;
		}
		background-color: #007AFF;
		border-radius: 40px;
		border-top-right-radius: 0px;
		border-bottom-right-radius: 0px;
		line-height: 60rpx;
		text-align: right;
		padding-right: 26rpx;
		font-size: 24rpx;
		background-color: #fff;
		position: fixed;
	    right: 0;
	    bottom: 60%;
	    z-index:2000;
	}
	.custom-share-button::after{
		border: 0px solid red;
	}
	.scroll-wrapper {
		padding: 0;
		white-space: nowrap;
	}
	.scroll-item {
		display: inline-block;
		width: 28%;
		margin-right: 16rpx;
		white-space: normal;
		&:first-child {
			margin-left: 30rpx;
		}
		&:last-child {
			margin-right: 30rpx;
		}
		image {
			display: block;
			border-radius: 10rpx;
		}
		.scroll-item-name {
			font-weight: bold;
			color: #000;
			font-size: 32rpx;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			margin-top: 10rpx;
		}
		.scroll-item-price {
			font-weight: bold;
			color: orange;
			font-size: 28rpx;
			margin-top: 8rpx;
		}
	}
	.banner {
		image {
			display: block;
			width: 100%;
		}
	}
	.scroll-list {
		padding-bottom: 20rpx;
		border-bottom: 20rpx solid #eee;
	}
	.scroll-head {
		display: flex;
		align-items: center;
		padding: 36rpx 30rpx;
		image {
			display: block;
			width: 28rpx;
			height: 28rpx;
			margin-right: 10rpx;
		}
		text {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}
	}
	.btn-loadmore {
		text-align: center;
		font-size: 28rpx;
		color: #5f89ff;
		padding: 40rpx 0;
	}
	.main-cate {
		display: flex;
		padding: 40rpx 0;
		background-color: $white;
		view {
			display: flex;
			flex: 1;
			flex-direction: column;
			align-items: center;
			image {
				width: 70rpx;
			}
			text {
				font-size: 28rpx;
				margin-top: 10rpx;
			}
		}
	}
	.program-tips {
		text-align: center;
		font-size: 24rpx;
		color: gray;
		padding: 30rpx 0 0;
	}
</style>
